<template>
  <div class="page-list-live">
    <PageList>
      <template #header>历史位置查询</template>
      <template #filter>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="人员位置查询" name="peopleLocation">
            <ListFilter :form="peopleFilter" :key-list="peopleKeyList" @search="handleSearch" @reset="handleReset"></ListFilter>
          </el-tab-pane>

          <el-tab-pane label="车辆位置查询" name="carLocation">
            <ListFilter :form="carFilter" :key-list="carKeyList" @search="handleSearch" @reset="handleReset"></ListFilter>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #tips>
        <el-button icon="el-icon-delete" type="danger" @click="batchDeletion">批量删除</el-button>
      </template>
    </PageList>
    <component :is="activeName" ref="locationRef" @deleHandle="handleSelect"></component>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import ListFilter from '@/components/ListFilter'
  import { area, path, autoGate, baseStation } from '@/api/api'

  export default {
    components: {
      ListFilter,
      carLocation: () => import('./components/carLocation'),
      peopleLocation: () => import('./components/peopleLocation')
    },
    mixins: [listMixin],
    data() {
      return {
        // tab选中的标签
        activeName: 'peopleLocation',
        peopleFilter: {
          'baseStation.area.name': {
            label: '区域',
            placeholder: '请选择区域',
            type: 'select',
            arr: this.areaList
          },
          parntd: {
            label: '读卡设备',
            placeholder: '请选择读卡设备',
            type: 'select',
            arr: this.equipmentList
          },
          enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
          keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
        },
        peopleKeyList: [
          'employee.accessCardID',
          'employee.name',
          'employee.rfid',
        ],
        // 区域
        areaList: [],
        // 设备
        equipmentList: [],
        // 闸机
        autoGateList: [],
        // 基站
        baseStationList: [],
        carFilter: {
          'baseStation.area.name': {
            label: '区域',
            placeholder: '请选择区域',
            type: 'select',
            arr: this.areaList
          },
          parntd: {
            label: '读卡设备',
            placeholder: '请选择读卡设备',
            type: 'select',
            arr: this.equipmentList
          },
          enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
          keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
        },
        carKeyList: [
          'car.plateNumber',
          'car.carType',
          'car.rfid',
        ],
        deleteList: {
          id: ''
        },
      }
    },
    mounted() {
      this.threeList()
    },
    methods: {
      // 区域
      async areaHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await area('post', obj, false)
          if (res.code === 200) {
            // this.areaList = [{
            //   label: '空',
            //   value: '空'
            // }]
            this.areaList = []
            res.data.items.map(item => {
              this.areaList.push({
                label: item.name,
                value: item.name
              })
            })
          }
        } catch (err) {
          this.areaList = []
        }
      },
      // 查询闸机
      async autoGateHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await autoGate('post', obj, false)
          if (res.code === 200) {
            this.autoGateList = []
            res.data.items.map(item => {
              this.equipmentList.push({
                label: item.name,
                value: item.name
              })
              this.autoGateList.push({
                label: item.name,
                value: item.id
              })
            })
          }
        } catch (err) {
          let er = err
        }
      },
      // 查询基站
      async baseStationHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await baseStation('post', obj, false)
          if (res.code === 200) {
            this.baseStationList = []
            res.data.items.map(item => {
              this.equipmentList.push({
                label: item.name,
                value: item.name
              })
              this.baseStationList.push({
                label: item.name,
                value: item.id
              })
            })
          }
        } catch (err) {
          let er = err
        }
      },
      // 查询区域，闸机，基站
      async threeList() {
        this.equipmentList = []
        await this.areaHandler()
        await this.autoGateHandler()
        await this.baseStationHandler()
        this.$nextTick(() => {
          this.peopleFilter = {
            'baseStation.area.name': {
              label: '区域',
              placeholder: '请选择区域',
              type: 'select',
              arr: this.areaList
            },
            parntd: {
              label: '读卡设备',
              placeholder: '请选择读卡设备',
              type: 'select',
              arr: this.equipmentList
            },
            enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
            keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
          }
          this.carFilter = {
            'baseStation.area.name': {
              label: '区域',
              placeholder: '请选择区域',
              type: 'select',
              arr: this.areaList
            },
            parntd: {
              label: '读卡设备',
              placeholder: '请选择读卡设备',
              type: 'select',
              arr: this.equipmentList
            },
            enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
            keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
          }
        })
      },
      handleSelect(value) {
        this.deleteList = value
      },
      // 批量删除
      batchDeletion() {
        if (!this.deleteList.id) {
          this.$message.warning('请选择要删除的数据！')
          return
        }
        this.$_delConfirm('所选数据', () => {
          this.delRowReq(this.deleteList)
        })
      },
      async delRowReq(row) {
        try {
          let obj = { id: row.id, value: null }
          await path('delete', obj, true)
          row.loadingDel = false
          this.$refs.locationRef.getList(this.serchObj)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } catch (err) {
          row.loadingDel = false
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .sc-list-filter-col {
    width: auto;
  }
  /deep/.el-tabs__header {
    margin: 0 0;
  }
</style>
